<template>
  <div ref="myLine"></div>
</template>
<script>
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
console.log(year+seperator1+month+seperator1+strDate);
let echarts = require('echarts/lib/echarts');
  export default {
    name: 'myBarChart',
    props: ['chartData','layer'],
    data () {
      return {

      }
    },
    created () {
      
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        var _this=this;
        let dom= this.$refs.myLine;
        let myLine = echarts.init(dom);
        console.log('chartData',this.chartData);
        var yAxisData1=[];
        var yAxisData2=[];
        var yAxisData3=[];
        var yAxisData4=[];
        var yAxisData5=[];
        var xAxisData=[];
        var seriesData=[];
        var layer=parseInt(this.layer);
        console.log("layer",layer);
        var legendData=[];
        var dataName=['A层','B层','C层','D层','E层','F层','G层',];
        var output=["A_output","B_output","C_output","D_output","E_output","F_output","G_output"];
        var color=['#dd6b66','#ea7e53','#8dc1a9','#e69d87','#759aa0','#ea7e53','#8dc1a9',];
        // for(var i=1;i<32;i++){
        //   xAxisData.push(i);
        //   yAxisData.push(parseInt(20*Math.random()));
        // }
        if(this.chartData.length>0){
          this.chartData.forEach(function(i){
            xAxisData.push(i.days);
          })
        }
        for(var a=0;a<layer;a++){
          var data=[];
          if(this.chartData.length>0){
            this.chartData.forEach(function(i){
              data.push(i[output[a]]);
            })
          };
          legendData.push(dataName[a]);
          seriesData.push({
            name:dataName[a],
            type:'bar',
            itemStyle: {color:color[a]},
            data: data,
            stack: '层',
            barWidth:10,
          });
        }
        // 绘制图表
        myLine.setOption({
          textStyle: {
            color:'#fff',
          },
          title: {
            text: `${month}月产量汇总`,//_this.title
            x:'center',
            subtext:'',//_this.subtitle
            textStyle: {
              color: '#fff',
              fontSize:20,
              fontWeight: 'normal',
            },
            top: '10px',
            subtextStyle: {
              color: '#a0a0a0',
              fontSize: 15,
            },
          },
          legend: {
            data:legendData,//['A层','B层','C层','D层','E层'],
            show:true,
            top:'40px',
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: '10%',right: '8%',bottom:'20px',top:'80px',
          },
          tooltip: {
            formatter: '{a}<br/>{b0}号: {c0}'
          },
          xAxis: {
            type: 'category',
            //interval:100,
            data: xAxisData,//["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            name: '时间 ',
            //boundaryGap: false,
            nameLocation: 'end',
            nameTextStyle: {
              color: '#00ffff',
            },
            axisLine: {
              show:true,
              lineStyle: {
                color: '#345871',
                width: 3,
              },
              symbol: ['none', 'arrow'],
            },
            axisTick: {show:false,},
            splitLine: {
              show: false,
              interval: 'auto',
              lineStyle: {
                color: ["#0f5070"],
                type: 'dashed',
              },
            },
            axisLabel: {
              //align:'left',
            },
          },
          yAxis: [
            {
              type: 'value',
              name: '产量',
              nameLocation: 'end',
              // min: 0,
              // max: 100,
              // interval: 10,
              nameTextStyle: {
                color: '#00ffff',
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2d4359',
                  width: 3,
                },
                symbol: ['none', 'arrow'],
              },
              axisTick: {show:false,},
              splitLine: {
                show: true,
                interval: 'auto',
                lineStyle: {
                  color: ["#345871"],
                  type: 'dashed',
                },
              },
              axisLabel: {
                formatter: '{value}'
              }
            },
          ],
          series:seriesData,
          // series: [
          //   {
          //     name:'A层',
          //     type:'bar',
          //     itemStyle: {
          //       color:'#dd6b66',
          //       barBorderRadius: [0, 0, 5, 5]
          //     },
          //     data: yAxisData1,//[20, 49, 70, 32, 56, 67, 36, 22, 26, 20, 64, 33],
          //     stack: '层',
          //     barWidth:10,
          //   },
          //   {
          //     name:'B层',
          //     type:'bar',
          //     itemStyle: {
          //       color:'#ea7e53',
          //     },
          //     data: yAxisData2,//[20, 49, 70, 32, 56, 67, 36, 22, 26, 20, 64, 33],
          //     stack: '层',
          //     barWidth:10,
          //   },
          //   {
          //     name:'C层',
          //     type:'bar',
          //     itemStyle: {
          //       color:'#8dc1a9',
          //     },
          //     data: yAxisData3,//[20, 49, 70, 32, 56, 67, 36, 22, 26, 20, 64, 33],
          //     stack: '层',
          //     barWidth:10,
          //   },
          //   {
          //     name:'D层',
          //     type:'bar',
          //     itemStyle: {
          //       color:'#e69d87',
          //     },
          //     data: yAxisData4,//[20, 49, 70, 32, 56, 67, 36, 22, 26, 20, 64, 33],
          //     stack: '层',
          //     barWidth:10,
          //   },
          //   {
          //     name:'E层',
          //     type:'bar',
          //     itemStyle: {
          //       color:'#759aa0',
          //       barBorderRadius: [5, 5, 0, 0],
          //     },
          //     data: yAxisData5,//[20, 49, 70, 32, 56, 67, 36, 22, 26, 20, 64, 33],
          //     stack: '层',
          //     barWidth:10,
          //   },
          // ]
        });
      },
    }
  }
</script>
<style scoped>
</style>
